<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="bg-dark mui-text-center pos-relative logo-content">
				<div class="bg-dark flex flex-jc-around pdt-10 pos-relative">
					<img src="./img/arbicap_logo.png" style="height: 80px" alt="">
					<h1 style="height: 80px;line-height: 80px;" class="cl-white">阿尔卑斯</h1>
				</div>
			</div>
			<p class="ele cl-dark pd-5" data-clipboard-target="#address" style="font-size: 18px;margin: 0;">
				<!-- 报单地址 -->
			</p>
			<input type="text" style="opacity: 0;height: 0;margin: 0;padding: 0;" id="address">
			<div class="pdt-5 pdb-10 bg-white">
				<form class="mui-input-group" id="form">
					<div class="mui-input-row mgt-10">
						<label>姓名</label>
						<input type="text" name="name" class="mui-input-clear" placeholder="请输入姓名">
					</div>
					<div class="mui-input-row mgt-10">
						<label>联系电话</label>
						<input type="text" name="tel" class="mui-input-clear" placeholder="请输入联系电话">
					</div>
					<div class="mui-input-row mgt-10">
						<label>身份证</label>
						<input type="text" name="id_card" class="mui-input-clear" placeholder="请输入身份证">
					</div>
					<div class="mui-input-row mgt-10">
						<label>报单金额</label>
						<input type="text" name="money" class="mui-input-clear" placeholder="请输入报单金额">
					</div>
				</form>
				<ul class="mui-table-view upload">
					<li class="mui-table-view-cell flex flex-jc-start">
						<label for="upload">转账凭证</label>
						<input style="display: none;" name="img" id="upload" type="file" accept="image/*" class="abc">

						<label for="upload" class="mgl-20 pos-relative" style="z-index: 100;">
							<span class="flex flex-center" style="width: 80px;height: 80px;border:1px dashed #666;">
								<span class="mui-icon mui-icon-camera"></span>
							</span>
						</label>
						<img src="img/touxiang.jpg" id="showImg" style="width: 80px;height: 80px;" alt="" class="mgl-4" />
					</li>
				</ul>
				<div class="recharge">
					<button type="button" class="mui-btn bd-radius-20 bg-white w100" style="margin-top: 10vh;font-size: 20px">确认</button>
				</div>
			</div>
		</div>
		<script>
			mui('.logo-content').on('click', 'div', function() {
				location.href = './index.html'
			})

			const members_id = localStorage.getItem('MEMBERS')
			mui.ajax(HOST + 'v1/members-detail', {
				data: {
					members_id: members_id
				},
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(res) {
					if (res.result === 0) {
						// mui('input[name="name"]')[0].value = res.data.name
						// mui('input[name="bank_num"]')[0].value = res.data.bank_num
						mui('input[name="id_card"]')[0].value = res.data.id_card || ''
						// mui('input[name="bank_address"]')[0].value = res.data.bank_address
						// mui('input[name="bank_name"]')[0].value = res.data.bank_name
						// mui('input[name="name"]')[0].value = res.data.name
						mui('input[name="tel"]')[0].value = res.data.tel || ''
						mui('.ele')[0].innerHTML = `报单地址：${res.data.official_ele_address}`
						mui('#address')[0].value = res.data.official_ele_address
						let clipboard = new ClipboardJS('.ele');
						clipboard.on('success', function(e) {
							e.clearSelection();
							
							mui.toast('复制成功', {
								duration: 'long',
								type: 'div'
							})
						});
						clipboard.on('error', function(e) {
						    console.error('Action:', e.action);
						    console.error('Trigger:', e.trigger);
						});
					}
				},
				error: function(xhr, type, errorThrown) {
					mui.toast(errorThrown, {
						duration: 'long',
						type: 'div'
					})
				}
			});

			mui('.upload').on('change', '#upload', function(e) {
				//获取图片文件
				var imgFile = e.target.files[0];
				//后缀选取
				if (!/\/(?:jpeg|jpg|png)/i.test(imgFile.type)) {
					console.log(图片格式不支持);
					return;
				}
				//异步读取文件
				var reader = new FileReader();
				reader.onload = function(evt) {
					//替换url
					mui("#showImg")[0].setAttribute('src', evt.target.result);
				}
				reader.readAsDataURL(imgFile);
			})
			mui('.recharge').on('tap', 'button', function() {
				const name = mui('input[name="name"]')[0].value
				const tel = mui('input[name="tel"]')[0].value
				const id_card = mui('input[name="id_card"]')[0].value
				const money = mui('input[name="money"]')[0].value

				const imgfile = document.getElementById('upload').files[0]

				if (name.length === 0) {
					mui.toast('请填写您的名字', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				const telreg = /^1[3456789]\d{9}$/
				if (tel.length === 0) {
					mui.toast('请填写您的联系电话', {
						duration: 'long',
						type: 'div'
					})
					return
				} else if (!telreg.test(tel)) {
					mui.toast('电话号码格式不正确', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				const cardreg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				if (id_card.length === 0) {
					mui.toast('请填写您的身份证', {
						duration: 'long',
						type: 'div'
					})
					return
				} else if (!cardreg.test(id_card)) {
					mui.toast('身份证号码不正确', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				if (money.length === 0) {
					mui.toast('请填写报单金额', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				if (!imgfile) {
					mui.toast('请上传您的转账截图', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				var formData = new FormData(document.getElementById("form"));
				formData.set("img", document.getElementById('upload').files[0]);
				formData.set("name", name);
				formData.set("tel", tel);
				formData.set("id_card", id_card);
				formData.set("money", money);
				formData.set("members_id ", members_id);

				mui.showLoading()
				mui.ajax(HOST + 'v1/recharge-add', {
					data: formData,
					contentType: false,
					processData: false,
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(res) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if (res.result === 0) {
							mui.hideLoading()
							mui('input[name="name"]')[0].value = ''
							mui('input[name="tel"]')[0].value = ''
							mui('input[name="id_card"]')[0].value = ''
							mui('input[name="money"]')[0].value = ''
							mui('input[name="img"]')[0].value = ''
							location.href = './property.html'
						} else {
							mui.toast(res.message, {
								duration: 'long',
								type: 'div'
							})
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast(errorThrown, {
							duration: 'long',
							type: 'div'
						})
					}
				});
			})
		</script>
	</body>
</html>
